import { Button, Card, Form, Input, message, Table, Modal } from 'antd'
import {SearchOutlined,EditOutlined,DeleteOutlined} from "@ant-design/icons"
import { ColumnsType } from 'antd/lib/table';
import { useEffect, useState } from 'react';
import {ReqBatchDeleteHospitalSet, ReqDeleteHospitalSet, ReqGetHospitalSetListResponse} from '@api/hospitalSet/hospitalSet'
import { HospitalItem, HospitalList } from '@/api/hospitalSet/model/hospitalSetTypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';

const {confirm} = Modal

export default function HospitalSet() {

    // 当前页码
    let [current,setCurrent]= useState<number>(1);

    //总页数
    let [total,setTotal] = useState<number>(50);

    //每页展示数量
    let [pageSize,setPageSize] = useState<number>(5);

    //声明 医院设置 列表的状态
    let [hospital,setHospital] = useState<HospitalList>([]);

    // loading状态
    let [loading,setLoading] = useState<boolean>(false)

    // 获取usrForm hook
    let [form] = useForm()

    //获取navigate 函数
    let navigate = useNavigate();

    //批量选中状态
    let [selectedKeys,setSelectedKeys] = useState<React.Key[]>([]);
    
    //设置表格 表头数据
    let columns:ColumnsType<any> = [
        {
            title:"序号",  //表头的名称
            width:80,
            align:"center",
            render(key:any,rows:any,index:number){   //自定义渲染
                return index+1;
            }
        },
        {
            title:"医院名称",
            dataIndex:"hosname",  //指向data 数据源中的数据
            align:"center",
        },
        {
            title:"医院编号",
            dataIndex:"hoscode",
            align:"center",
        },
        {
            title:"api基础路径",
            dataIndex:"apiUrl",
            align:"center",
        },
        {
            title:"签名",
            dataIndex:"signKey",
            align:"center",
        },
        {
            title:"联系人姓名",
            dataIndex:"contactsName",
            align:"center",
        },
        {
            title:"联系人手机",
            dataIndex:"contactsPhone",
            align:"center",
        },
        {
            title:"操作",
            align:"center",
            render(row:HospitalItem){
                return <>
                    <Button icon={<EditOutlined />} type="primary" onClick={()=>{
                        navigate(`/syt/hospital/hospitalSet/edit/${row.id}`)
                    }}></Button>
                    <Button className='ml' icon={<DeleteOutlined />} danger type="primary" onClick={del(row.id,row.hosname)}></Button>
                </>
            },
            fixed:"right"
        }

    ]

    // 请求获取医院设置列表的方法
    let getHospiatalSetList = async(page=current,limit=pageSize)=>{
        let {hoscode,hosname} = form.getFieldsValue()
        //展示loading
        setLoading(true)
        //调用 封装的请求api获取数据
        let result = await ReqGetHospitalSetListResponse({page,limit,hoscode,hosname})
        //设置医院数据
        setHospital(result.records)
        //设置总数
        setTotal(result.total)
        //关闭loading
        setLoading(false)
    }
    //模拟 componentDidMount  和componentDidUpdate
    useEffect(()=>{
        getHospiatalSetList()
    },[current,pageSize])

    // 点击提交表单
    let finish = ()=>{
        getHospiatalSetList()
    }
    // 清空表单
    let reset = ()=>{
        getHospiatalSetList()
    }

    //删除单个医院数据方法
    let del = (id:number,hosname:string)=>{
        return ()=>{

            confirm({
                title: `确定要删除${hosname}吗?`,
                icon: <DeleteOutlined />,
                onOk: async()=> {
                    await ReqDeleteHospitalSet(id)
                    message.success("删除成功！")
                    getHospiatalSetList(1,5)
                },
                onCancel() {},
              });

           
        }
    }

    //批量删除 医院信息
    let batchDel = ()=>{
        confirm({
            title: "确定删除吗？",
            async onOk(){
                await ReqBatchDeleteHospitalSet(selectedKeys)
                message.success("删除成功")

                // 清空选中的状态的数据
                setSelectedKeys([])
                // 重新请求数据
                getHospiatalSetList(1,5)
            }
        })
    }

    return (
        <Card>     
            {/* 搜索表单部分 start */}
            <Form
                layout="inline"
                onFinish={finish}
                onReset={reset}
                form={form}
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

               
                <Form.Item >
                    <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                        查询
                    </Button>

                    <Button className='ml' type="default" htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            {/* 搜索表单部分 end */}

            <div className='mt'>
                <Button type="primary" onClick={()=>{
                    navigate("/syt/hospital/hospitalSet/add")
                }}>添加</Button>
                <Button className='ml' disabled={selectedKeys.length === 0} danger type="primary" onClick={batchDel}>批量删除</Button>
            </div>


            {/* 表格部分 */}
            <Table 
                rowKey="id"
                rowSelection={{
                    onChange(selectedRowKeys: React.Key[]){
                        setSelectedKeys(selectedRowKeys)
                    }
                }}
                columns={columns} 
                dataSource={hospital}
                bordered
                className='mt'
                scroll={{x:1200}}
                loading={loading}
                pagination={{
                    total:total,  //总数
                    pageSize:pageSize,  // 每页条数
                    current:current,  // 当前页码
                    pageSizeOptions:[5,10,15,20],  //  设置每页展示数据量
                    showSizeChanger:true, // 永远展示控制分页器
                    showQuickJumper:true,  // 快速跳转至某页
                    showTotal(total: number){
                         return <span>总计：{total} 条</span>
                    },
                    onChange(page:number,pageSize:number){
                        setPageSize(pageSize)
                        setCurrent(page)
                    }
                }}
            />
        </Card>
    )
}
